{literal}
<script type="text/javascript">
  var site = $('#site');
  
  $(document).ready(function() {
    window.prettyPrint && prettyPrint()
    $('#lightGallery').lightGallery({caption:true,desc:true,mobileSrc:true,hideControlOnEnd:true,easing:'cubic-bezier(0.25, 0, 0.25, 1)'});   
    var clk = true;
        $('.btn-navbar').on('click',function(){
            if(site.hasClass('translate')){
                clk = false;    
                site.removeClass('translate');  
                setTimeout(function(){
                    $("#mast-head").css('display','none');  
                    clk = true;
                },700);
            }else if(clk){
                $("#mast-head").css('display','block'); 
                site.addClass('translate');     
            }
        });
        $('#site').on('touchmove', function(e) {
            if($(this).hasClass('translate')){
                e.preventDefault();
            }
        });
        $('#site > .nav-over').on('click touchstart',function(e){
            e.preventDefault();
            e.stopPropagation();
            clk = false;
            site.removeClass('translate');  
            setTimeout(function(){
                $("#mast-head").css('display','none');  
                clk = true;
            },700); 
        })
        $(window).on("resize orientationchange", function(){
            if($(window).width() > 767){
                $("#mast-head").css('display','block'); 
                site.removeClass('translate');
            }else if(!site.hasClass('translate')){
                $("#mast-head").css('display','none');      
            }
        });
  });
</script>
{/literal}
  <div class="judul-single">
    <div class="container">
      
      <h1>Gallery Foto dari Album <span style="color: #008edc;">{$album['album']}</span></h1>
      
      <p class="garis-single"></p>
    </div>
  </div>
  <div class="bg-white-single">  
    <div class="container margintop20">

      <div id="container" class="large-8 columns transitions-enabled large-centered clearfix" >
        <ul id="lightGallery" class="gallery list-unstyled">
          {foreach $gallery as $value}
          <li data-title="{$value['judul']}" data-desc="" data-src="{base_url('foto_gallery')}/{$value['gambar']}">
            <div class="box col2">
              <div class="tinggi-fix">
                <a href="{base_url('foto_gallery')}/{$value['gambar']}">
                  <center>
                    <img src="{base_url('foto_gallery')}/{$value['gambar']}" title="{$value['judul']}" alt="{$value['judul']}">
                  </center>
                </a>
              </div>
              <div class="nm-produk text-center">
                {$value['judul']}
              </div>
            </div>
          </li>
          {/foreach}
        </ul>
      </div>

    </div>
  <div class="clearfix"></div>
  </div>
